<template>
  <div id="vue-tinymce">
    <vue-tinymce ref="tinymceEditor" v-model="editorVlaue" :setting="setting" />
  </div>
</template>

<script>
// import {baseUploadUrl} from "@/config/env";
import { baseURL } from "@/api/request";
export default {
  name: "vueTinymceEditor",
  data() {
    return {
      editorVlaue: this.content != null ? this.content : "",
      setting: {
        menubar: true, // 菜单栏
        //inline: true,   //开启内联模式
        readonly: false, // 只读
        toolbar:
          "undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table emoticons | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat | wordcount code",
        toolbar_drawer: "sliding",
        quickbars_selection_toolbar:
          "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",
        plugins:
          "link image media table lists fullscreen quickbars wordcount paste emoticons code",
        language: "zh_CN",
        height: window.innerHeight - 200,
        // 图片上传地址(自动上传)
        images_upload_url: baseURL,
        // 允许粘贴图片上传,及格式
        paste_data_images: true,
        images_file_types: "jpeg,jpg,png,gif,bmp,webp",
        // 此处为图片上传处理函数 (手动上传)
        images_upload_handler: (blobInfo, success, failure, progress) => {
          console.log("上传处理器：");
          //请求数据
          const formData = new FormData();
          formData.append("file", blobInfo.blob(), blobInfo.filename());
          //请求方法
          this.request
            .post("/essay/uploadEssayPic", formData)
            .then((res) => {
              if (res.code == 200) {
                success(baseURL + res.data);
              } else {
                failure(res.msg);
              }
            })
            .catch((err) => {
              failure("服务响应异常，请稍后重试");
            });
        },
      },
    };
  },
  mounted() {},
  props: {
    // 接收值父组件传递值
    content: String,
    contentText: String,
  },
  watch: {
    editorVlaue: function (newNum, oldNum) {
      // 修改调用者传入的值
      this.$emit("update:content", newNum);
      // 去除标签
      const strippedHtml = newNum.replace(/<[^>]+>/g, "");
      // 去除换行并保留空格
      const trimmedText = strippedHtml
        .replace(/\n+/g, "\n")
        .replace(/\s+/g, " ");
      this.$emit("update:contentText", trimmedText.trim());
    },
  },
};
</script>

<style>
/* 富文本按钮功能优先级,最好 > 2500  弹出默认2000+ */
.tox-tinymce-aux {
  z-index: 9999 !important;
}
</style>
